<template>
  <div ref="clockCircle" class="clock__circle">
    <div class="clock__hand" :style="getHourHandStyle()"></div>
    <div class="clock__hand" :style="getMinuteHandStyle()"></div>
    <div class="clock__hand" :style="getSecondHandStyle()"></div>
    <div class="clock__hand" :style="getSecondHandStyle1()"></div>
    <div v-for="tick in 12" :key="tick" :style="getNumberStyle(tick)" class="clock__number">
      {{ tick }}
    </div>
    <!-- 空心圆盘 -->
    <div class="clock__center"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hoursAngle: 0,
      minutesAngle: 0,
      secondsAngle: 0,
      clockSize: 200, // 默认大小
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新一次
    this.updateClockSize();
    window.addEventListener('resize', this.updateClockSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateClockSize);
  },
  methods: {
    updateTime() {
      const now = new Date();
      const hours = now.getHours() % 12;
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      // 计算角度
      this.hoursAngle = (hours + minutes / 60) * 30; // 每小时30度
      this.minutesAngle = (minutes + seconds / 60) * 6; // 每分钟6度
      this.secondsAngle = seconds * 6; // 每秒6度
    },
    updateClockSize() {
      if (this.$refs.clockCircle) {
        this.clockSize =
            this.$refs.clockCircle.offsetWidth;
        console.log("this.clockSize = ",this.clockSize)
      }
    },
    getNumberStyle(tick) {
      const radius = this.clockSize / 2;
      const angle = tick * 30; // 每个数字间隔30度
      const numberRadius = radius * 0.75; // 数字距离圆心的距离
      const x = Math.sin((angle * Math.PI) / 180) * numberRadius; // 计算x坐标
      const y = -Math.cos((angle * Math.PI) / 180) * numberRadius; // 计算y坐标

      return {
        position: "absolute",
        fontSize: `7px`, // 字体大小
        fontWeight: `600`,
        color: "var(--text-color)",
        top: `calc(50% + ${y}px)`, // 垂直位置
        left: `calc(50% + ${x}px)`, // 水平位置
        transform: "translate(-50%, -50%)", // 居中数字
      };
    },
    getHourHandStyle() {
      const radius = this.clockSize / 2;
      return {
        position: "absolute",
        borderRadius: "20px",
        width: "2px",
        height: `${radius * 0.5}px`, // 时针长度为半径的50%
        backgroundColor: "var(--text-color)",
        top: `${radius * 0.5}px`, // 时针顶部距离圆心的距离
        left: "50%",
        transformOrigin: "center bottom",
        transform: `translateX(-50%) rotate(${this.hoursAngle}deg)`,
      };
    },
    getMinuteHandStyle() {
      const radius = this.clockSize / 2;
      return {
        position: "absolute",
        borderRadius: "20px",
        width: "2px",
        height: `${radius * 0.6}px`, // 分针长度为半径的70%
        backgroundColor: "var(--text-color)",
        top: `${radius * 0.4}px`, // 分针顶部距离圆心的距离
        left: "50%",
        transformOrigin: "center bottom",
        transform: `translateX(-50%) rotate(${this.minutesAngle}deg)`,
      };
    },
    getSecondHandStyle() {
      const radius = this.clockSize / 2;
      return {
        position: "absolute",
        borderRadius: "20px",
        width: "1.5px",
        height: `${radius * 0.6}px`, // 秒针长度为半径的90%
        backgroundColor: "#D81E07 ",
        top: `${radius * 0.4}px`, // 秒针顶部距离圆心的距离
        left: "50%",
        transformOrigin: "center bottom",
        transform: `translateX(-50%) rotate(${this.secondsAngle}deg)`,
      };
    },
    getSecondHandStyle1() {
      const radius = this.clockSize / 2;
      return {
        position: "absolute",
        borderRadius: "20px",
        width: "1.5px",
        height: `${radius * 0.2}px`, // 秒针长度为半径的90%
        backgroundColor: "#D81E07 ",
        top: `${radius * 0.8}px`, // 秒针顶部距离圆心的距离
        left: "50%",
        transformOrigin: "center bottom",
        transform: `translateX(-50%) rotate(${this.secondsAngle - 180}deg)`,
      };
    },
  },
};
</script>

<style>
body {
  --hue-color: 240;
  --first-color: hsl(var(--hue-color), 53%, 49%);
  --title-color: hsl(var(--hue-color), 53%, 15%);
  --text-color: hsl(var(--hue-color), 12%, 35%);
  --text-color-light: hsl(var(--hue-color), 12%, 65%);
  --white-color: #FFF;
  --body-color: hsl(var(--hue-color), 24%, 94%);
  --biggest-font-size: 3rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .625rem;
  --font-medium: 500;
  --mb-0-25: .25rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2-5: 2.5rem;
  --z-normal: 1;
  --z-tooltip: 10;
}
.clock__circle {
  position: relative;
  width: 100%; /* 宽度由父组件决定 */
  height: 100%; /* 高度由父组件决定 */
  aspect-ratio: 1 / 1; /* 保持宽高比为1:1 */
  //box-shadow: -6px -6px 16px var(--white-color),
  //6px 6px 16px hsla(var(--hue-color), 30%, 86%, 1),
  //inset 6px 6px 16px hsla(var(--hue-color), 30%, 86%, 1),
  //inset -6px -6px 16px var(--white-color);
  box-shadow: -4px -4px 10px var(--white-color),
  4px 4px 10px hsla(var(--hue-color), 30%, 86%, 1),
  inset 4px 4px 10px hsla(var(--hue-color), 30%, 86%, 1),
  inset -4px -4px 10px var(--white-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
}
.clock__hand {
  position: absolute;
  background-color: var(--text-color);
  transform-origin: center bottom;
  z-index: 2; /* 确保指针在空心圆盘上方 */
}
.clock__number {
  position: absolute;
  font-weight: var(--font-medium);
  color: var(--text-color);
  user-select: none; /* 防止用户选中数字 */
  z-index: 1; /* 确保数字在空心圆盘上方 */
}
/* 空心圆盘样式 */
.clock__center {
  position: absolute;
  background-color: #D81E07;
  width: 2px; /* 圆盘宽度 */
  height: 2px; /* 圆盘高度 */
  border: 2px solid white; /* 圆盘边框 */
  border-radius: 50%; /* 圆形 */
  z-index: 100; /* 确保圆盘在指针下方 */
}
</style>